<template>
    <div class="ical2clean">
        <div class="row">
            <div class="col-md-12">
                <div class="panel">
                    <div class="panel-heading" style="overflow: hidden">
                        Filter
                    </div>
                    <div class="input-group m-b-30" style="padding: 0 20px 20px 20px;">
                        <input class="form-control" placeholder="Date" v-model="date" type="date">
                        <span class="input-group-btn">
                                        <button class="btn btn-info" type="button" @click="fetch">Go!</button>
                                    </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <item-table title="Clean List" :columns="columns" :data="data" :loading="tableLoading" @sort="sort"
                            isSearch @search="search" :total="data.length"
                >
                    <template slot="type" slot-scope="props">
                        <span v-if="props.item.type == 'no-ical'" class="label label-danger">没有对应日历项</span>
                        <span v-else-if="props.item.type == 'no-order'" class="label label-warning">没有对应okumasan order</span>
                    </template>
                    <template slot="comment" slot-scope="props">
                        <div class="td-ellipsis">
                            {{props.item.comment}}
                        </div>
                        <i v-if="props.item.comment" class="fif fif-ellipsis text-info"
                           @click="showTdDetail(props.item.comment)"></i>
                    </template>
                    <template slot="physical_room_id" slot-scope="props">
                        <a :href="`#/physicalroomcalendar/${props.item.physical_room_id}`" target="_blank">
                            {{props.item.physical_room_id}}
                        </a>
                    </template>
                    <template slot="next_check_in" slot-scope="props">
                        <div class="checkbox checkbox-success" style="margin: 0;">
                            <input type="checkbox" v-model="props.item.next_check_in" disabled>
                            <label></label>
                        </div>
                    </template>
                </item-table>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import ItemTable from '@/components/widgets/ItemTable'
    import FilterForm from '@/components/widgets/FilterForm'
    //import moment from 'moment'
    // api
    import {getCleanList} from '@/api/okumasan'
    import swal from 'sweetalert'

    export default {
        name: "Ical2Clean",
        components: {vSelect, ItemTable, FilterForm},
        created() {
            this.columns = [
                {key: '#', label: '#', type: 'serial', align: 'center'},
                {key: 'type', label: '异常类型', sort: true},
                {key: 'physical_room_id', label: '房源别名', sort: true},
                {key: 'cleaner', label: '清扫人员', sort: true},
                {key: 'checkout', label: '退房时间'},
                {key: 'guest_num', label: '下批退房人数', width: 100},
                {key: 'day_long', label: '住房时长', columnAlign: 'center'},
                {key: 'next_check_in', label: '是否同天入住'},
                {key: 'comment', label: '备注'},
            ]
        },
        mounted() {
            this.fetch()
        },
        data() {
            return {
                // loading
                tableLoading: false,
                // data
                originData: null,
                data: [],
                filters: [],
                orderBy: '',
                orderDir: '',
                // filter
                keyWord: '',
                date: moment().format('YYYY-MM-DD')
            }
        },
        methods: {
            search(key) {
                this.keyWord = key
                this.filter()
            },
            fetch() {
                this.tableLoading = true
                getCleanList(this.date).then(res => {
                    this.tableLoading = false
                    this.originData = res.data
                    this.filter()
                }).catch(e => {
                    this.tableLoading = false
                })
            },
            showTdDetail(msg) {
                msg = msg || ''
                swal('', msg, 'info')
            },
            filter() {
                let data = []
                if (this.keyWord) {
                    if (this.originData) {
                        if (this.keyWord === '1') {
                            data = this.originData.filter((item) => {
                                return item.next_check_in
                            })
                        } else if (this.keyWord === '0') {
                            data = this.originData.filter((item) => {
                                return !item.next_check_in
                            })
                        } else {
                            data = this.originData.filter((item) => {
                                return item.physical_room_id.indexOf(this.keyWord) != -1 ||
                                    item.cleaner.indexOf(this.keyWord) != -1 ||
                                    (item.comment && item.comment.indexOf(this.keyWord) != -1) ||
                                    toString(item.next_check_in).indexOf(this.keyWord) != -1
                            })
                        }
                    }
                } else {
                    data = this.originData
                }

                if (this.orderBy) {
                    data.sort((a, b) => {
                        return this.orderDir == 'descend' ?
                            a[this.orderBy].localeCompare(b[this.orderBy]) : b[this.orderBy].localeCompare(a[this.orderBy])
                    })
                }

                this.data = data
            },
            sort(dir, column) {
                this.orderBy = column[0]
                this.orderDir = dir[0]
                this.filter()
            }
        }
    }
</script>

<style scoped lang="stylus">

</style>